<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改页面</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
</head>
<body>
<div class="center-container">
    <form class="layui-form" id="editFrom" action="">
        <div class="mainBox">
            <div class="main-container">
                <div class="layui-form-item ">
                    <label class="layui-form-label">id</label>
                    <div class="layui-input-block">
                        <input id="input_id" name="id" type="text"
                               readonly
                               placeholder="id(必填)" lay-verify="required"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item ">
                    <label class="layui-form-label">课程编号</label>
                    <div class="layui-input-block">
                        <input id="input_courseNo" name="courseNo" type="text" placeholder="课程编号(必填)" lay-verify="required"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item ">
                    <label class="layui-form-label">课程名称</label>
                    <div class="layui-input-block">
                        <input id="input_cname" name="cname" type="text" placeholder="课程名称(必填)" lay-verify="required"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item ">
                    <label class="layui-form-label">任课教师</label>
                    <div class="layui-input-block">
                        <input id="input_tno_dropdown" name="tno"
                               data-tno="" readonly
                               type="text" placeholder="任课教师"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item ">
                    <label class="layui-form-label">课程学分</label>
                    <div class="layui-input-block">
                        <input id="input_credits" name="credits" type="number" placeholder="课程学分(必填)" lay-verify="required"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item ">
                    <label class="layui-form-label">课时</label>
                    <div class="layui-input-block">
                        <input id="input_hours" name="hours" type="number" placeholder="课时(必填)" lay-verify="required" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item ">
                    <label class="layui-form-label">所属院系</label>
                    <div class="layui-input-block">
                        <input id="input_department_dropdown" name="departmentId" type="text"
                               data-department-id=""  readonly
                               placeholder="所属院系(必填)" lay-verify="required"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item ">
                    <label class="layui-form-label">开课学期</label>
                    <div class="layui-input-block">
                        <input id="input_semester" name="semester" type="text" placeholder="开课学期(必填)" lay-verify="required"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item ">
                    <label class="layui-form-label">考核方式</label>
                    <div class="layui-input-block">
                        <input id="input_assessMethod" name="assessMethod" type="text" placeholder="考核方式"
                               class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                        lay-filter="course-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </form>
</div>

<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['form', 'jquery', 'dropdown'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let dropdown = layui.dropdown;

        // 初始化表单数据
        window.initForm = function(data) {
            console.log("初始化表单数据:", data);
            if (!data) {
                console.error("初始化表单时，数据为空！");
                return;
            }

            // 使用表单ID为 'editFrom' 的表单来初始化
            $.each(data, function(key, value) {
                let field = $('#editFrom [name="' + key + '"]'); // 修改为 'editFrom' 表单

                if (field.length) {  // 确保字段存在
                    if (field.is(':radio')) {  // 对于单选框
                        field.filter('[value="' + value + '"]').prop("checked", true);  // 填充单选框
                    } else if (field.is(':checkbox')) {  // 对于复选框
                        field.prop("checked", value === "yes");  // 填充复选框
                    } else {  // 对于其他文本框等字段
                        field.val(value);  // 填充其他字段
                    }
                }
            });

            layui.form.render(); // 渲染表单
            console.log("表单已初始化:", data);
        };

        form.on('submit(course-save)', function (data) {

            // 获取教师编号和专业编号
            if ($('#input_tno_dropdown').attr("data-tno") !== "") {
                data.field.tno = $('#input_tno_dropdown').attr("data-tno");
            } else if ($('#input_department_dropdown').attr("data-department-id") !== "") {
                data.field.departmentId = $('#input_department_dropdown').attr("data-department-id");
            }

            console.log("新增表单数据" + JSON.stringify(data.field));
            $.ajax({
                url: '/api/course/update',
                data: JSON.stringify(data.field),
                dataType: 'json', // 返回指定数据类型为 JSON
                contentType: 'application/json', // 设置请求参数类型为 JSON
                type: 'PUT',
                success: function (result) {
                    if (result.code === 200) {
                        // 成功回调，处理返回的数据
                        console.log("编辑成功", result);
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 500
                        }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window
                                .name)); //关闭当前页
                            parent.layui.table.reload("course-table");
                        });
                    } else {
                        // 成功回调，处理返回的数据
                        console.error("编辑失败", result);
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 500
                        });
                    }
                }
            })
            return false;
        });

        // 监听班级输入框点击事件，获取班级列表
        $('#input_tno_dropdown').click(() => {
            console.log("点击了教师编号(名称)的下拉菜单，查询教师信息");
            // 使用 Ajax 请求获取数据
            $.ajax({
                url: '/api/teacher/getAll', // 后端接口地址
                method: 'GET', // 请求方式
                dataType: 'json', // 预期服务器返回的数据类型
                success: function (response) {
                    console.log("获取到的教师编号(名称)数据：", response.data);

                    dropdown.render({
                        elem: '#input_tno_dropdown',
                        closeOnClick: false, // 不开启“打开与关闭的自动切换”，即点击输入框时始终为打开状态
                        data: response.data.map(function (item) {
                            return {
                                title: item.name, // 设置标题为教师编号(名称)名称
                                tno: item.tno // 设置值
                            };
                        }),
                        click: function (obj) {
                            console.log("点击了：", obj.title);
                            this.elem.val(obj.title); // 设置输入框的值为点击项的标题
                            this.elem.attr("data-tno", obj.tno) // 设置data-class-no为班级编号
                        },
                        style: 'min-width: 235px; max-height: 200px; overflow-y: auto;' // 设置下拉菜单最大高度和滚动条
                    });
                },
                error: function (xhr, status, error) {
                    console.error("请求失败: " + error);
                }
            });
        })

        // 监听专业输入框点击事件，获取专业列表
        $('#input_department_dropdown').click(() => {
            console.log("点击了专业的下拉菜单，查询专业信息");
            // 使用 Ajax 请求获取数据
            $.ajax({
                url: '/api/department/getAll', // 后端接口地址
                method: 'GET', // 请求方式
                dataType: 'json', // 预期服务器返回的数据类型
                success: function (response) {
                    // 假设返回的数据结构类似: [{ id: 1, title: 'Class 1' }, { id: 2, title: 'Class 2' }]
                    dropdown.render({
                        elem: '#input_department_dropdown',
                        closeOnClick: false, // 不开启“打开与关闭的自动切换”，即点击输入框时始终为打开状态
                        data: response.data.map(function (item) {
                            return {
                                title: item.department, // 设置标题为专业名称
                                departmentId: item.departmentId,
                            };
                        }),
                        click: function (obj) {
                            console.log("点击了：", obj.title);
                            this.elem.val(obj.title); // 设置输入框的值为点击项的标题
                            console.log("data-department-id的值为：", obj.departmentId);
                            this.elem.attr("data-department-id", obj.departmentId)
                        },
                        style: 'min-width: 235px; max-height: 200px; overflow-y: auto;' // 设置下拉菜单最大高度和滚动条
                    });
                },
                error: function (xhr, status, error) {
                    console.error("请求失败: " + error);
                }
            });
        })
    })
</script>
<script>
</script>
</body>

</html>

<style>
    /* 将整个容器设置为 flex 布局，垂直和水平居中 */
    .center-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    /* 给表单添加一些内边距和背景 */
    .layui-form {
        padding: 20px;
    }

    .layui-form-label {
        text-align: center; /* 水平居中 */
    }

</style>

